<template>
  <div class="detail">
    <div class="add_con">
      <div class="self_info">
        <div class="title_bold">基本信息</div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">出差部门</div>
            <div class="right">{{ checkForm.orgName }}</div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info info_side">
            <div class="left">姓名</div>
            <div class="right">{{ checkForm.userName }}</div>
          </div>
          <div class="grid_info">
            <div class="left">职务</div>
            <div class="right">{{ checkForm.post }}</div>
          </div>
        </div>
        <template v-if="checkForm.accompanyList.length">
          <div class="info_line" v-for="(item, index) in checkForm.accompanyList" :key="index">
            <div class="grid_info info_side">
              <div class="left">姓名</div>
              <div class="right info_cell">
                {{ item.accompanyName }}
              </div>
            </div>
            <div class="grid_info">
              <div class="left">职务</div>
              <div class="right info_cell">
                {{ item.accompanyPost }}
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="box_info">
        <div class="title_bold">出差信息</div>
        <div class="info_line">
          <div class="grid_info info_input">
            <div class="left">出差事由</div>
            <div class="right">
              <!-- <van-field
                class="scroe_input"
                v-model="checkForm.reimburseReason"
                rows="4"
                autosize
                type="textarea"
                :placeholder="'请输入'"
                readonly /> -->
              {{ checkForm.reimburseReason }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">出差开始时间</div>
            <div class="right info_cell">
              {{ checkForm.startTime && checkForm.startTime.slice(0, -3) }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">出差结束时间</div>
            <div class="right info_cell">
              {{ checkForm.endTime && checkForm.endTime.slice(0, -3) }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">目的地</div>
            <div class="right info_cell">
              {{ checkForm.startPlace }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">出发地</div>
            <div class="right info_cell">
              {{ checkForm.leavePlace }}
            </div>
          </div>
        </div>
        <div class="info_line">
          <div class="grid_info">
            <div class="left">交通工具</div>
            <div class="right">
              <van-radio-group v-model="checkForm.transportation" direction="horizontal" disabled>
                <van-radio name="1">公共交通-火车/高铁/客车/飞机</van-radio>
                <van-radio name="2">公车</van-radio>
                <van-radio name="3">平台租赁</van-radio>
                <van-radio name="4">其他(请注明)</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
        <div class="info_line" v-if="checkForm.transportation === '4'">
          <div class="grid_info">
            <div class="left">其他说明</div>
            <div class="right info_cell">
              {{ checkForm.transportationRemark }}
            </div>
          </div>
        </div>
      </div>
      <div class="box_info">
        <div class="title_bold">附件</div>
        <div class="info_line">
          <div class="grid_info grid_annex">
            <div class="right">
              <ImgUpload v-bind:albumList.sync="checkForm.enclosureList" :entry="false" />
            </div>
          </div>
        </div>
      </div>
      <van-collapse class="check_main" v-model="activeName2" accordion>
        <van-collapse-item name="0">
          <template #title>
            <div class="type_title_bold">审批流程</div>
          </template>
          <expenseSteps :approveFlow="approveFlow" />
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="check_btn" v-if="getBtnApprove()">
      <van-button size="small" type="info" @click="approvalData('1')">通 过</van-button>
      <van-button size="small" type="danger" @click="approvalData('2')">不通过</van-button>
      <van-button size="small" type="danger" @click="approvalData('3')">退回</van-button>
    </div>
    <div class="check_btn" v-if="getBtnEdit()">
      <van-button size="small" type="danger" @click="approvalData('4')" v-if="detailInfo.canRevoke === '1'">
        撤回
      </van-button>
      <van-button size="small" type="danger" @click="approvalData('5')" v-if="detailInfo.isCanZZ === '1'">
        终止
      </van-button>
    </div>
    <van-dialog
      v-model="dialogShow"
      title="审批意见"
      show-cancel-button
      @confirm="submit()"
      @cancel="dialogShow = false"
      :before-close="onBeforeClose">
      <van-field
        type="textarea"
        v-model="suggest"
        placeholder="请输入审批意见"
        autofocus
        class="sugg"
        rows="4"
        maxlength="50"
        show-word-limit />
    </van-dialog>
  </div>
</template>

<script>
import { getTripReimburseDetail, approveFormExpense } from '@api/api-dailyManage.js'
import expenseSteps from './expenseSteps'
import ImgUpload from '@com/ImgUpload'
import moment from 'moment'
export default {
  name: 'expenseDetail',
  components: {
    expenseSteps,
    ImgUpload,
  },
  props: {},
  data() {
    return {
      moment: moment,
      userInfo: JSON.parse(localStorage.userInfo),
      model: '',
      queryInfo: this.$route.query,
      activeName2: '', // 审批流程
      approveFlow: {},
      userType: this.$route.query.userType, // 1.申报人；2.蒋林冬；3.局领导；4:出差审核;5:差旅审核
      detailInfo: {},
      dialogShow: false,
      suggest: '',
      title: '',
      userName: JSON.parse(localStorage.userInfo).userName,
      orgName: JSON.parse(localStorage.userInfo).loginPostInfo.orgName,
      postName: JSON.parse(localStorage.userInfo).loginPostInfo.postName,
      checkForm: {
        id: '',
        formTitle: '出差审批表',
        formType: '1',
        accompanyList: [],
        reimburseReason: '',
        startTime: '',
        endTime: '',
        boardingTime: '',
        startPlace: '',
        transportation: '',
        transportationRemark: '',
        userId: localStorage.userId,
        userName: JSON.parse(localStorage.userInfo).userName,
        orgId: JSON.parse(localStorage.userInfo).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.userInfo).loginPostInfo.orgName,
        post: JSON.parse(localStorage.userInfo).loginPostInfo.postName,
      },
      vehicleList: [
        {
          vehicleBrand: '',
          carNumber: '',
          driver: '',
          telephone: '',
        },
      ],
      approveType: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTripReimburseDetail()
  },
  mounted() {},
  methods: {
    goback() {
      this.$router.go(-1)
    },
    approvalData(type) {
      this.approveType = type
      this.suggest = ''
      if (['2', '3'].includes(type)) {
        this.dialogShow = true
      } else if (['4', '5'].includes(type)) {
        const str = type === '4' ? '确认撤回该审批表吗？' : '确认终止该审批表吗？'
        this.$dialog
          .confirm({
            message: str,
          })
          .then(() => {
            this.submit()
          })
          .catch(() => {})
      } else {
        this.submit()
      }
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    getTripReimburseDetail() {
      getTripReimburseDetail({
        id: this.$route.query.id,
      }).then(res => {
        if (res.code === 0) {
          this.detailInfo = res.data
          this.checkForm = res.data
          this.approveFlow = {
            id: this.detailInfo.id,
            processInstanceId: this.detailInfo.processInstanceId,
          }
        }
      })
    },
    submit() {
      if (['2', '3'].includes(this.approveType) && this.suggest.trim().length === 0) {
        return this.$toast.fail('请填写审批意见')
      }
      approveFormExpense({
        content: this.suggest,
        id: this.detailInfo.id,
        processInstanceId: this.detailInfo.processInstanceId,
        status: this.approveType,
        taskId: this.detailInfo.taskId,
      }).then(res => {
        if (res.code === 0) {
          this.dialogShow = false
          this.$toast.success('审批成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    },
    onBeforeClose(action, done) {
      if (action === 'confirm') {
        return done(false)
      } else {
        return done()
      }
    },
    getBtnApprove() {
      if (
        (this.queryInfo.firstType === '3' || !this.queryInfo.firstType || this.queryInfo.operate === '1') &&
        this.detailInfo.saveStatus === '1' &&
        this.detailInfo.status === '0'
      ) {
        return true
      } else {
        return false
      }
    },
    getBtnEdit() {
      if (
        this.detailInfo.saveStatus === '1' &&
        (this.detailInfo.canRevoke === '1' || this.detailInfo.isCanZZ === '1') &&
        (this.queryInfo.firstType === '1' || this.queryInfo.operate === '2')
      ) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.detail {
  background-color: #f5f5f5;
  height: 100%;
}
.add_con {
  padding: 7px 12px 60px;
  background-color: #f5f5f5;
  font-size: 13px;
  color: #333333;
  width: 100%;
  overflow-x: hidden;
  min-height: 100%;
  .title_bold {
    font-weight: 800;
    font-size: 15px;
    span {
      color: #d9001b;
    }
  }
  .self_info,
  .car_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    .add-box {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      .add-one {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #86642c;
        font-size: 14px;
        padding: 7px 15px;
        border: 1px solid #86642c;
        border-radius: 5px;
        span {
          margin-left: 7px;
          font-weight: 600;
        }
      }
    }
  }
  .info_line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .grid_info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid #d7d7d7;
      .left {
        font-size: 14px;
        width: 65px;
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
        color: #333333;
        text-align: center;
      }
      .right {
        flex: 1;
        text-align: right;
        word-break: break-all;
        white-space: pre-wrap;
      }
    }
    .info_side {
      margin-right: 10px;
    }
  }
  .info_cell {
    /deep/.van-cell {
      display: flex;
      align-items: center;
      font-size: 13px;
      .van-icon-arrow {
        display: flex;
        align-items: center;
      }
    }
    /deep/.van-cell__value {
      text-align: right;
      padding-right: 10px;
      color: #999999;
    }
    /deep/.van-field__control {
      text-align: right;
    }
  }
  .box_info {
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 10px;
    .info_input {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .right {
        // border: 1px solid #efefef;
        margin-top: 10px;
        width: 100%;
        text-align: left !important;
        .scroe_input {
          padding: 0 5px;
          width: 100%;
          height: auto;
          line-height: 20px;
          font-size: 13px;
          resize: none;
        }
      }
    }
    .van-radio-group {
      .van-radio {
        margin-left: 20px;
        margin-bottom: 7px;
      }
    }
    .info_radio {
      .left {
        width: 100px;
      }
      .van-radio-group {
        justify-content: flex-end;
        .van-radio {
          margin-left: 20px;
          margin-bottom: 0;
        }
      }
    }
    .grid_annex {
      width: 100%;
      .right {
        width: 100%;
        text-align: left !important;
      }
    }
  }
  .car_info {
    margin-top: 10px;
    .info_line {
      align-items: stretch;
    }
    .box_head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 600;
      margin-top: 6px;
      .van-icon-delete-o {
        font-weight: 600;
        font-size: 20px;
      }
      .left {
        font-size: 14px;
        background-image: linear-gradient(#ffffff, #e5d2b4);
      }
    }
    .btn_add {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      .add-one {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #86642c;
        font-size: 14px;
        padding: 7px 15px;
        border: 1px solid #86642c;
        border-radius: 5px;
        span {
          margin-left: 7px;
          font-weight: 600;
        }
      }
    }
  }
  // 底部
  .fead_boot {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #fff;
    .van-button {
      height: 32px;
    }
  }
}
.check_main {
  background-color: #ffffff;
  box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
  margin-top: 10px;
  border-radius: 5px;
  .type_title_bold {
    font-size: 15px !important;
    color: #333333;
    font-weight: 600;
  }
}
.check_btn {
  margin-top: 10px;
  background-color: #ffffff;
  padding: 5px 15px;
  box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  /deep/.van-button {
    height: 32px;
  }
}
/deep/.van-dialog__content {
  padding: 12px;
  .sugg {
    border: 1px solid #efefef;
    padding: 0 5px;
    width: 100%;
    height: auto;
    line-height: 20px;
    font-size: 13px;
    resize: none;
  }
}
</style>
